<!-- pages/index/index.vue -->
<script setup lang="ts">
const { safeAreaInsets } = uni.getSystemInfoSync()
console.log(safeAreaInsets);

</script>
<template>
   <scroll-page v-if="safeAreaInsets">
      <view class="index-page" :style="{ backgroundPositionY: -48 + safeAreaInsets.top + 'px' }">
         <!-- 页面导航 -->
         <view class="page-navbar" :style="{ paddingTop: safeAreaInsets.top + 'px' }">优医</view>
         <!-- 搜索栏 -->
         <view class="search-bar">
            <input placeholder-class="input-placeholder" placeholder="搜一搜: 疾病/症状/医生/健康知识" class="input" type="text" />
            <view class="icon-search">
               <uni-icons size="22" color="#C3C3C5" type="search" />
            </view>
         </view>
         <!-- 快速入口 -->
         <view class="quick-entry">
            <navigator hover-class="none" url="" class="quick-entry-item">
               <view class="">
                  <image class="quick-entry-icon" src="/static/images/quick-entry-1.png" />
                  <text class="label">问医生</text>
               </view>
               <text class="small">按科室查问医生</text>
            </navigator>
            <navigator hover-class="none" class="quick-entry-item" url="/subpkg_consult/quickly/index?type=2">
               <view class="">
                  <image class="quick-entry-icon" src="/static/images/quick-entry-2.png" />
                  <text class="label">极速问诊</text>
               </view>
               <text class="small">20s医生极速回复</text>
            </navigator>
            <navigator hover-class="none" url="" class="quick-entry-item">
               <view class="">
                  <image class="quick-entry-icon" src="/static/images/quick-entry-3.png" />
                  <text class="label">开药门诊</text>
               </view>
               <text class="small">线上买药更方便</text>
            </navigator>
         </view>
         <!-- 快速查看 -->
         <view class="quick-view">
            <navigator hover-class="none" url="/subpkg_medicine/order_list/index">
               <view class="quick-view-item">
                  <image class="quick-view-icon" src="/static/images/quick-view-1.png" />
                  <text class="label">药品订单</text>
               </view>
            </navigator>
            <navigator hover-class="none" url="/subpkg_archive/list/index">
               <view class="quick-view-item">
                  <image class="quick-view-icon" src="/static/images/quick-view-2.png" />
                  <text class="label">健康档案</text>
               </view>
            </navigator>
            <navigator hover-class="none">
               <view class="quick-view-item">
                  <image class="quick-view-icon" src="/static/images/quick-view-3.png" />
                  <text class="label">我的处方</text>
               </view>
            </navigator>
            <navigator hover-class="none">
               <view class="quick-view-item">
                  <image class="quick-view-icon" src="/static/images/quick-view-4.png" />
                  <text class="label">疾病查询</text>
               </view>
            </navigator>
         </view>
         <!-- 广告位 -->
         <view class="banner-placeholder">
            <swiper class="uni-swiper" indicator-dots indicator-color="#ffffff99" indicator-active-color="#fff"
               circular>
               <swiper-item>
                  <navigator hover-class="none" class="navigator" url=" ">
                     <image class="banner-image" src="/static/images/banner-1.png" />
                  </navigator>
               </swiper-item>
               <swiper-item>
                  <navigator hover-class="none" class="navigator" url=" ">
                     <image class="banner-image" src="/static/images/banner-1.png" mode="aspectFill" />
                  </navigator>
               </swiper-item>
            </swiper>
         </view>
         <!-- 标签页列表 -->
         <custom-tabs></custom-tabs>

         <!-- 列表 -->
         <view class="feed-list">
            <view class="feed-list-item" v-for="item in 10" :key="item">
               <view class="feed-meta">
                  <image class="doctor-avatar" src="/static/uploads/doctor-avatar.jpg" />
                  <view class="doctor-info">
                     <text class="name">王医生</text>
                     <text class="desc">积水潭 皮肤科 主任医师</text>
                  </view>
                  <button class="doctor-button" plain>+ 关注</button>
               </view>
               <view class="feed-topic">炎热夏季如何防晒？</view>
               <view class="feed-relation"># 儿童健康</view>
               <view class="feed-content">
                  <view class="text">
                     炎热的夏季，那大太阳无时不刻在考验着我们的肌肤，过强、过多的阳光中紫外线的
                  </view>
                  <view class="picture">
                     <image mode="aspectFill" class="uni-image" src="/static/uploads/feed-1.jpeg" />
                     <image mode="aspectFill" class="uni-image" src="/static/uploads/feed-2.jpeg" />
                     <image mode="aspectFill" class="uni-image" src="/static/uploads/feed-3.jpeg" />
                  </view>
               </view>
               <view class="feed-extra">
                  <text>12 收藏</text>
                  <text>120 评论</text>
               </view>
            </view>
         </view>
      </view>
   </scroll-page>
</template>

<style lang="scss">
@import './index.scss';
</style>